<template>
	<view class="product-list">
		<scroll-view class="product-list-left" scroll-y>
			<CategoriesNav v-model="ProductId" />
		</scroll-view>
		<scroll-view class="product-list-right" scroll-y refresher-enabled="true" @scrolltolower="Refresherrefresh">
			<CompProductList :ProductList="obtProductList.data" :pagination="pagination" />
			<CompBottomLine v-if="Loading" :content="LoadingTxt" />
		</scroll-view>
	</view>
</template>

<script>
	import * as types from "@/store/types.js";	
	import CompProductList from "@/components/Comp_ProductList/Comp_ProductList.vue"
	import CategoriesNav from '@/components/Comp_CategoriesNav/Comp_CategoriesNav.vue'
	import CompBottomLine from '@/components/Comp_BottomLine/Comp_BottomLine.vue'

	export default {
		components:{
			CategoriesNav,
			CompProductList,
			CompBottomLine
		},
		data() {
			return {
				ProductId:0,
				Loading:false,
				LoadingTxt:"正在加载...",
				pagination: {
					total: 0,
					current: 1,
					pageSize:10,
					sizeOpts:[5,10,15,20]
				}
			};
		},
		computed: {
			//取出商品列表
			obtProductList() {
				return this.$store.getters.gproductlist;
			},
		},
		methods: {
			Load(params){
				if(params == 'refresh'){
					this.$set(this.pagination,'current',1)
				}
				this.$store.dispatch(types.AProductList,this.FormattingQueryStr({
					categoryId:(this.ProductId>0)?this.ProductId:'',
					page:this.pagination.current,
					size:this.pagination.pageSize
				})).then(res=>{
					this.Loading = false;
				});
			},
			Refresherrefresh(e){
				this.Loading = true;
				this.pagination.current++;
				if(this.pagination.current < this.obtProductList.totalPages){
					this.Load();
				}else{
					this.LoadingTxt = "没有更多的商品了"
				}
			}
		},
	}
</script>

<style scope lang="less">
	@import "./Page_Productlist.less";
</style>
